<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>卷烟消费 -- 客户维度统计</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet"/>
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
    <style>
        .spinner {
            margin: 11px auto 0;
            height: 20px;
            text-align: center;
        }

        .spinner > div {
            width: 10px;
            height: 10px;
            background-color: #67CF22;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            /* Prevent first frame from flickering when animation starts */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }

        .custom-btn {
            width: 147px;
            height: 88px;
            /*box-shadow: 1px 1px 1px #888888;*/
            text-align: center;
            display: inline-block;
            margin-top: 3px;
            margin-right: 3px;
        }

        .custom-btn-num-text {
            color: white;
            font-size: 20px;
            font-family: fantasy;
            margin-top: 39px;
        }

        .my-btn {
            width: 147px;
            height: 71px;
            background-color: green;
            position: relative;
            display: inline-block;
            border-radius: 10px;
        }

        .head-btn {
            position: absolute;
            font-size: 16px;
            top: 10px;
            left: 35px;
            color: white;
        }

        .foot-btn {
            bottom: 0px;
            width: 100%;
            height: 19px;
            background: rgba(45, 32, 32, 0.2);
            position: absolute;

        }

        .detail-btn {
            font-size: 12px;
            position: absolute;
            top: 2px;
            left: 6px;
            color: white;
        }

        .detail-click {
            position: absolute;
            right: 6px;
            top: 1px;
            color: white;
        }

        .body-btn {
            position: absolute;
            color: white;
            font-size: 20px;
            font-family: fantasy;
            text-align: center;
            top: 38px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;

        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<button style="position: absolute; top: 5px;right: 20px;"
        class="btn btn-info" onclick="javascript:window.opener=null;window.open('','_self');window.close();">关闭</button>
<div class="container-fluid" id="app">
    <div class="row">
        <h4 class="col-sm-6 col-xs-9">客户维度统计：</h4>
        <%--  <div class="spinner col-sm-6 col-xs-3" style="text-align: right;" title="正在实时获取数据标志">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
          </div>--%>
    </div>

    <form class="form-inline" style=" margin-bottom: 5px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="市局名称">
            </div>
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                           placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>
        <div class="form-group">
            <input id="custNameInput" class="form-control input-sm" type="text" placeholder="请选择客户">
        </div>
        <div class="form-group">
            <input id="custCodeInput" class="form-control input-sm" type="text" placeholder="请输入客户号">
        </div>
        <div class="form-group">
            <input id="operatorTimeInput" class="form-control input-sm" type="text" placeholder="请选择月份(必选)">
        </div>
      <%--  <div class="form-group">
            <input id="endOperatorTimeInput" class="form-control input-sm" type="text" placeholder="请选择结束月份">
        </div>--%>
        <button type="button" class="btn btn-sm btn-success" @click="getData();">查询</button>
    </form>

    <div class="row" style="margin-bottom:20px;margin-left: 26px;">
        <a class="my-btn"

           style="background: rgb(63,175,214);">
            <div class="head-btn">注册会员数</div>
            <div class="body-btn">{{formatNum(registerNum)}}</div>
        </a>
        <a class="my-btn"

           style="background: rgb(92,122,221);">
            <div class="head-btn">日均销售量</div>
            <div class="body-btn">{{formatNum(dayOrderNum/10)}}条</div>
        </a>
    </div>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main1" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main2" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main3" style="margin-top: 10px;"></div>
    </div>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main4" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main5" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main6" style="margin-top: 10px;"></div>
    </div>

</div>

<div class="modal fade" tabindex="-1" role="dialog" id="gridSystemModal" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">选择品规</h4>
            </div>
            <div class="modal-body">
                <div class="content_wrap">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="selectProductTreeNames();">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src=${contextPath}/static/layer/layer.js></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            time: '',
            cityName: '',
            quXianName: '',
            channelName: '',
            empName: '',
            endTime: '',
            registerNum:0,
            dayOrderNum : 0,
        },
        methods: {
            initTimeInput: function () {
                $('#operatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });
                $("#operatorTimeInput").on("change", function () {
                    app.time = this.value
                })

                var now = new Date();
                var defaultTime = now.getFullYear() + '-'
                var month = now.getMonth() + 1
                if (month < 10) {
                    month = '0' + month
                }
                defaultTime = defaultTime + month

                $("#operatorTimeInput").val(defaultTime)
                app.time = defaultTime;

                var custCode = localStorage.toCustomerSmokeCustCode;
                if (custCode) {
                    $('#custCodeInput').val(custCode);
                }

                $('#endOperatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });
                $("#endOperatorTimeInput").on("change", function () {
                    app.endTime = this.value
                })


            },
            getData: function () {
                if(!this.time) {
                    layer.msg('月份为必选项');
                    $('#operatorTimeInput').focus();
                    return;
                }

                layer.load(1);
                var cityName = $("#cityNameInput").val();
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();
                var custName = $("#custNameInput").val();
                var custCode = $("#custCodeInput").val();

                $.ajax({
                    url: '${contextPath}/checking/getCustomerSmokeStatistics',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            time: this.time,
                            endTime: this.endTime,
                            cityName: cityName,
                            quXianName: quXianName,
                            channelName: channelName,
                            empName: empName,
                            custName: custName,
                            custCode: custCode
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success) {
                            var main1Data = data.data.main1Data;
                            app.updateMain1Data(main1Data);

                            var main2Data = data.data.main2Data;
                            app.updateMain2Data(main2Data);

                            var main3Data = data.data.main3Data;
                            app.updateMain3Data(main3Data);

                            var main4Data = data.data.main4Data;
                            app.updateMain4Data(main4Data);

                            var main5Data = data.data.main5Data;
                            app.updateMain5Data(main5Data);

                            var main6Data = data.data.main6Data;
                            app.updateMain6Data(main6Data);

                            app.registerNum = data.data.registerNum;
                            app.dayOrderNum = data.data.dayOrderNum;
                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg("网络错误")
                    }
                })
            },
            updateMain1Data: function (main1Data) {
                if (!main1Data) return;
                var names = ['女：0次', '男：0次'];
                var total = [{name: '女：0次', value: 0}, {name: '男：0次', value: 0}];

                for (var index in main1Data) {
                    var data = main1Data[index];
                    switch (data.SEX) {
                        case '女':
                            names[0] = '女：' + data.COUNT_ID + '次';
                            total[0] = {name: '女：' + data.COUNT_ID + '次', value: data.COUNT_ID};
                            break;
                        case '男':
                            names[1] = '男：' + data.COUNT_ID + '次';
                            total[1] = {name: '男：' + data.COUNT_ID + '次', value: data.COUNT_ID};
                            break;
                        default:
                            ;
                    }
                }


                var main1Option = {
                    title: {
                        text: '性别购买分布',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: names
                    },
                    series: [
                        {
                            name: '性别',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: total,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal:{
                                    label : {
                                        show : true,
                                        formatter: '{d}%'
                                    }
                                }
                            }
                        }
                    ]
                };
                myChart1.setOption(main1Option)
            },
            updateMain2Data: function (main2Data) {
                if (!main2Data) return;
                var res = [0, 0, 0, 0, 0, 0];

                if (main2Data) {
                    for (var index in main2Data) {
                        var data = main2Data[index];
                        var idx;
                        switch (data.QUANTITY_SUM + '') {
                            case '2':
                                idx = 0;
                                break;
                            case '3':
                                idx = 1;
                                break;
                            case '4':
                                idx = 2;
                                break;
                            case '5':
                                idx = 3;
                                break;
                            case '6':
                                idx = 4;
                                break;
                            case '7':
                                idx = 5;
                                break;
                            default:
                                ;
                        }
                        res[idx] = data.ORDER_COUNT;
                    }
                }
                var main2Option = {
                    color: ['#3338ff'],
                    title: {
                        text: '年龄购买分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['20岁', '30岁', '40岁', '50岁', '60岁', '其他']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: res
                    }]
                }

                myChart2.setOption(main2Option)
            },
            updateMain3Data: function (main3Data) {
                if (!main3Data) return;

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var prices = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                var quantity = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                for (var index in main3Data) {
                    var data = main3Data[index];
                    var idx;
                    switch (data.TIME_QUAN) {
                        case '00:00-05:59':
                            idx = 0
                            break;
                        case '06:00-07.59':
                            idx = 1
                            break;
                        case '08:00-09.59':
                            idx = 2
                            break;
                        case '10:00-11.59':
                            idx = 3
                            break;
                        case '12:00-13.59':
                            idx = 4
                            break;
                        case '14:00-15.59':
                            idx = 5
                            break;
                        case '16:00-17.59':
                            idx = 6
                            break;
                        case '18:00-19.59':
                            idx = 7
                            break;
                        case '20:00-21.59':
                            idx = 8
                            break;
                        case '22:00-23.59':
                            idx = 9
                            break;
                        default:
                            ;
                    }
                    prices[idx] = data.PRICES;
                    quantity[idx] = data.QUANTITY;
                }

                var main3Option = {
                    color: ['#129d2d', '#2ba7f7'],
                    title: {
                        text: '时段购买分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买量', '购买金额']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['00:00-05:59', '06:00-07.59', '08:00-09.59', '10:00-11.59', '12:00-13.59', '14:00-15.59', '16:00-17.59', '18:00-19.59', '20:00-21.59', '22:00-23.59']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买量',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        }, {
                            type: 'value',
                            name: '购买金额',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        }],
                    series: [{
                        name: '购买量',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }, {
                        name: '购买金额',
                        type: 'bar',
                        yAxisIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: prices
                    }]
                }
                myChart3.setOption(main3Option)
            },
            updateMain4Data: function (main4Data) {
                var names = [];
                var quantity = [];

                if (main4Data) {
                    for (var index in main4Data) {
                        var data = main4Data[index]
                        names.push(data.PRODUCT_NAME);
                        quantity.push(data.QUANTITY);
                    }
                }
                var main4Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '销量前五品规'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买数量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买数量',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        },],
                    series: [{
                        name: '购买数量',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart4.setOption(main4Option)
            },
            updateMain5Data: function (main5Data) {
                if (!main5Data) return;
                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */

                var names = ['一类', '二类', '三类', '四类', '五类'];
                var quantity = [0, 0, 0, 0, 0];
                for (var index in main5Data) {
                    var data = main5Data[index];
                    var idx;
                    switch (data.NAME) {
                        case '一类':
                            idx = 0;
                            break;
                        case '二类':
                            idx = 1;
                            break;
                        case '三类':
                            idx = 2;
                            break;
                        case '四类':
                            idx = 3;
                            break;
                        case '五类':
                            idx = 4;
                            break;
                        default:
                            ;
                    }
                    quantity[idx] = data.QUANTITY;
                }

                var main5Option = {
                    color: ['#1616ff'],
                    title: {
                        text: '价类分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买数量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买数量',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        },],
                    series: [{
                        name: '购买数量',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart5.setOption(main5Option)
            },
            updateMain6Data: function (main6Data) {
                if (!main6Data) return;

                var names = ['0-10', '11-15', '16-25', '26-35', '36-60', '60+'];
                var quantity = [0, 0, 0, 0, 0, 0];
                for (var index in main6Data) {
                    var data = main6Data[index];
                    var idx;
                    switch (data.PPRICE + '') {
                        case '1':
                            idx = 0;
                            break;
                        case '2':
                            idx = 1;
                            break;
                        case '3':
                            idx = 2;
                            break;
                        case '4':
                            idx = 3;
                            break;
                        case '5':
                            idx = 4;
                            break;
                        case '6':
                            idx = 5;
                            break;
                        default:
                            ;
                    }
                    quantity[idx] = data.QUANTITY;
                }

                var main6Option = {
                    color: ['#780cff'],
                    title: {
                        text: '价格分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买数量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买数量',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        },],
                    series: [{
                        name: '购买数量',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart6.setOption(main6Option)
            },
            updateMain7Data: function (main7Data) {
                if (!main7Data) return

                var times = []
                var names = []
                //var totalTimes = 0;
                for (var index in main7Data) {
                    var data = main7Data[index]
                    times.push(data.time);
                    names.push(data.name)
                    //  totalTimes += data.time;
                }

                // times.unshift(totalTimes);
                // names.unshift("合计");

                var main7Option = {
                    color: ['rgba(97,97,97,1)'],
                    title: {
                        text: '消费次数前十客户'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['消费次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names,
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '消费次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }],
                    series: [{
                        name: '消费次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }]
                }
                myChart7.setOption(main7Option)
            },
            updateMain8Data: function (main8Data) {
                if (!main8Data) return
                var times = []
                var quantity = []
                var prices = []
                var names = []

                var totilTimes = 0;
                var totilQuantity = 0;
                var totilPrices = 0;
                for (var index in main8Data) {
                    var data = main8Data[index]

                    times.push(data.time);
                    names.push(data.name)
                    quantity.push(data.quantity)
                    prices.push(data.prices)

                    totilTimes += data.time;
                    totilQuantity += data.quantity;
                    totilPrices += data.prices;
                }

                times.unshift(totilTimes);
                names.unshift("合计")
                quantity.unshift(totilQuantity)
                prices.unshift(totilPrices)

                var main8Option = {
                    color: ['#4690FF', '#A3D2F7'],
                    title: {
                        text: '消费者注册数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数', '购买量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['00:00-05:59', '06:00-07.59', '08:00-09.59', '10:00-11.59', '12:00-13.59', '14:00-15.59', '16:00-17.59', '18:00-19.59', '20:00-21.59', '22:00-23.59']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }, {
                            type: 'value',
                            name: '购买量',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        }],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }, {
                        name: '购买量',
                        type: 'bar',
                        yAxisIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart8.setOption(main8Option)
            },
            initProduct: function () {
                $.ajax({
                    url: '${contextPath}/page/getProductThreeName',
                    success: function (data) {
                        if (data.success) {
                            var zNodes = data.data;

                            var setting = {
                                check: {
                                    enable: true,
                                    chkStyle: "checkbox",
                                },

                                data: {
                                    simpleData: {
                                        enable: true,
                                        idKey: "ID",
                                        pIdKey: "PID",
                                        rootPId: '0',
                                    },
                                    key: {
                                        name: "NAME"
                                    },
                                },
                            };

                            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                        }
                    }
                })
            },
            formatNum: function (num) {
                if (!num) {
                    return '0';
                }


                if (num > 100000000) {
                    return (num / 100000000).toFixed(2) + "亿";
                }
                if (num > 10000) {
                    return (num / 10000).toFixed(2) + "万";
                }

                if (num.toString().indexOf('.') > 0) {
                    return (num * 1).toFixed(2)
                }

                return num
            },

        },
    })


    $(".main").height($("#main1").width())
    var myChart1 = echarts.init($("#main1")[0]);
    var myChart2 = echarts.init($("#main2")[0]);
    var myChart3 = echarts.init($("#main3")[0]);
    var myChart4 = echarts.init($("#main4")[0]);
    var myChart5 = echarts.init($("#main5")[0]);
    // var myChart7 = echarts.init($("#main7")[0])
    var myChart6 = echarts.init($("#main6")[0]);

    app.initProduct();
    app.initTimeInput();

    var customerLocationCustCode = sessionStorage.getItem('cl-code');
    if (customerLocationCustCode) {
        $('#custCodeInput').val(customerLocationCustCode)
    }
    app.getData();

    localStorage.removeItem("toCustomerSmokeCustCode");

    var selectProductTreeNames = function () {
        $("#gridSystemModal").modal('hide')
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes();
        app.productCode = ""
        if (nodes.length == 0) {
            $("#prodNameInput").val("")
            app.productCode = "'6901028039741'"
            return
        }
        var length = 0;
        for (var index in nodes) {
            var node = nodes[index]
            if (node.ISPRODNAME) {
                app.productCode = "'" + node.ID + "'," + app.productCode
                length++;
            }
        }
        app.productCode = app.productCode.substr(0, app.productCode.length - 1)
        $("#prodNameInput").val("已选择" + length + "条品规")
        app.isAllChoise = false
    }


    var cityNode = null, quXianNode = null, channelNode = null, empNode = null, custNode = null, shopNode = null;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    custNode = '#custNameInput';

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);
</script>
</html>


